/**
 * 图片懒加载lazy.img.js
 * 2021-04-19
 * 考虑兼容性的同学请自行补全向下兼容方案哦！！！
 *
 *  注意：------>
 *    1、为保证懒加载正确加载执行，请将此script文件放到head处。
 *    2、需要懒加载的图片上增加 .lazy-img 样式
 *    3、将图片地址写入src或data-src属性，建议data-src属性
 *    4、提供window.lazyLoadImage方法
 *  否则：懒加载有可能失效！
 **/
(function(){
  var observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (element, index) {
      if (element.isIntersecting) {
        //及时释放监听器
        observer.unobserve(element.target)
        //优化加载时机的步骤
        setTimeout(function(target){
          var src = target.getAttribute("data-src")
          target.setAttribute("src", src)
          target.removeAttribute("data-src")
        }.bind(null, element.target), 0)
      }
    }, {
      root: null,
      threshold: [0, 1]
    });
  })
  //页面初始化时
  document.onreadystatechange = function(){
    if(document.readyState === 'interactive' && typeof IntersectionObserver === 'function'){
      var imgs = document.querySelectorAll(".lazy-img")
      var src = null;
      for(var i =0; i<imgs.length; i++){
        src = imgs[i].getAttribute("src") || imgs[i].getAttribute("data-src")
        if(!src) continue;
        imgs[i].setAttribute("data-src", src)
        imgs[i].removeAttribute("src")
        window.lazyLoadImage(imgs[i])
      }
    }
  }
  //后续动态加入的节点可调用此方法进行懒加载
  window.lazyLoadImage = function(element){
    element && observer.observe(element)
  }
})();
